import {Feature} from "ol"
import {Point} from "ol/geom";
import {fromLonLat} from 'ol/proj';
import {GeoJSON} from 'ol/format'
import {Vector as VectorLayer} from "ol/layer";
import {Vector as VectorSource} from "ol/source";
import {Style, Fill, Stroke, Circle, Icon, Text} from "ol/style";
import chinaJson from "../data/china.json";

/**
 * 中国边界
 * */
// function setMarker(mapInstance) {
//     const chinaBorderURL = 'https://geo.datav.aliyun.com/areas_v3/bound/100000.json';
//     const vectorLayer = new VectorLayer({
//         source: new VectorSource({
//             url: chinaBorderURL,
//             format: new GeoJSON(),
//         }),
//         style: new Style({
//             stroke: new Stroke({
//                 color: '#0056ff',
//                 width: 2,
//             }),
//         }),
//     });
//     mapInstance.addLayer(vectorLayer);
// }
/**
 * 中国全部省份边界
 * */
// function setMarker(mapInstance) {
//     const chinaBorderURL = 'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=100000_full'; // 全国
//     const vectorLayer = new VectorLayer({
//         source: new VectorSource({
//             url: chinaBorderURL,
//             format: new GeoJSON(),
//         }),
//         style: new Style({
//             stroke: new Stroke({
//                 color: '#0056ff',
//                 width: 1,
//             }),
//             fill: new Fill({
//                 color: 'rgba(0, 0, 0, 0.05)'
//             }),
//         }),
//     });
//     mapInstance.addLayer(vectorLayer);
// }

/**
 * 中国省份边界
 * */
function setMarker(mapInstance) {
    const chinaBorderURL = 'https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=340000_full'; // 安徽省
    fetch(chinaBorderURL).then((response) => response.json()).then(data => {
        // 市图层
        const citySource = new VectorSource();
        const imageInstance = new Icon({
            src: '../img/favicon.ico',
            width: 16,
            height: 16,
            displacement: [-10, 0],
        })
        // 配合 new Text 使用
        // const imageInstance = new Circle({
        //     radius: 7,
        //     stroke: new Stroke({
        //         color: "#0056ff",
        //         width: 1,
        //     }),
        //     fill: new Fill({
        //         color: "rgba(0, 86, 255, 0.5)" // 可以调整透明度
        //     })
        // })
        data.features.map(item => {
            const feature = new Feature({
                geometry: new Point(fromLonLat(item.properties.center)),
            })
            // 配合 new Circle 使用
            // const textInstance = new Text({
            //     text: item.properties.name,
            //     font: "14px sans-serif",
            //     fill: new Fill({
            //         color: "#242934",
            //     }),
            //     textAlign: 'left',
            //     offsetX: 10,
            // })
            const styleData = new Style({
                image: imageInstance,
                // text: textInstance
            })
            feature.setStyle(styleData);
            citySource.addFeature(feature);
        })
        const cityLayer = new VectorLayer({
            source: citySource,
        });

        // 省份边界
        const boundariesLayer = new VectorLayer({
            source: new VectorSource({
                url: chinaBorderURL,
                format: new GeoJSON(),
            }),
            style: new Style({
                stroke: new Stroke({
                    color: '#0056ff',
                    width: 1,
                }),
                fill: new Fill({
                    color: 'rgba(0, 0, 0, 0.05)'
                }),
            }),
        });
        mapInstance.addLayer(cityLayer);
        mapInstance.addLayer(boundariesLayer);
    })
}

/**
 * 省的标记
 * */
// function setMarker(mapInstance) {
//     const vectorSource = new VectorSource();
//     const imageInstance = new Circle({
//         radius: 7,
//         stroke: new Stroke({
//             color: "#0056ff",
//             width: 1,
//         }),
//         fill: new Fill({
//             color: "rgba(0, 86, 255, 0.5)" // 可以调整透明度
//         })
//     })
//     chinaJson.features.forEach((item) => {
//         if(!item.properties.center) return;
//         const feature = new Feature({
//             geometry: new Point(fromLonLat(item.properties.center)),
//         });
//         const textInstance = new Text({
//             text: item.properties.name,
//             font: "14px sans-serif",
//             fill: new Fill({
//                 color: "#242934",
//             }),
//             textAlign: 'left',
//             offsetX: 10,
//         })
//         const styleData = new Style({
//             image: imageInstance,
//             text: textInstance
//         });
//         feature.setStyle(styleData);
//         vectorSource.addFeature(feature);
//     });
//     const markerLayer = new VectorLayer({
//         source: vectorSource
//     });
//     mapInstance.addLayer(markerLayer);
// }
export default setMarker
